<template>
  <div id="chart-panel"></div>
</template>
<script>
export default {
  name: 'DoubleColumn',
  props: {
    handlingData: {
      type: Object
    }
  },
  watch: {
    handlingData(newVal) {
      this.handlingData = newVal
      this.getDatacolum()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getDatacolum()
    })
  },
  methods: {
    getDatacolum() {
      console.log(this.handlingData)
      const option = {
        legend: {
          data: this.handlingData.legend,
          icon: 'circle',
          bottom: '3%',
          right: '15%',
          textStyle: {
            color: '#e6e6e6',
            fontSize: 12
          }
        },
        grid: {
          top: '10%',
          left: '7%',
          right: '5%',
          bottom: '15%',
          containLabel: true
        },
        barWidth: 5,
        xAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.2)'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            //  改变x轴颜色
            lineStyle: {
              color: '#E6E6E6'
            }
          },
          axisLabel: {
            //  改变x轴字体颜色和大小
            textStyle: {
              color: '#E6E6E6',
              fontSize: 12
            }
          }
        },
        yAxis: {
          type: 'category',
          data: this.handlingData.category,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            //  改变y轴颜色
            lineStyle: {
              color: '#DBDBDB'
            }
          },
          axisLabel: {
            //  改变y轴字体颜色和大小
            // formatter: '{value} m³ ', //  给y轴添加单位
            textStyle: {
              color: 'rgb(127, 127, 127)',
              fontSize: 12
            }
          }
        },
        series: [
          {
            type: 'bar',
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false, // 开启显示
                  position: 'right', // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: 'rgba(250,250,250,0.6)',
                    fontSize: 10,
                    fontWeight: 400
                  }
                },
                color: '#3CBDD0',
                borderWidth: 2,
                barBorderRadius: 15
              }
            },
            data: this.handlingData.list
          }
        ]
      }
      // 首次初始化option
      var chart0 = this.$echarts.init(document.getElementById('chart-panel'))
      chart0.setOption(option)
    }
  }
}
</script>

<style scoped>
#chart-panel {
  width: 100%;
  height: 90%;
}
</style>
